<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <script>
        // 假设图片地址是按序号命名，存储在数组中（这里需替换为实际图片地址）
        const heroImgs = [];
        for (let i = 1; i <= 20; i++) {
            heroImgs.push(`./${i}.webp`); // 实际图片路径根据项目调整
        }

        // 弹出输入框获取个数
        const count = prompt('请输入1~20个之间的永雄的个数：');
        const heroBox = document.getElementById('heroBox');

        // 验证输入并渲染图片
        if (count && !isNaN(count) && count >= 1 && count <= 20) {
            for (let i = 0; i < count; i++) {
                const img = document.createElement('img');
                img.src = heroImgs[i];
                img.className = 'hero-img';
                heroBox.appendChild(img);
            }
        } else {
            alert('输入不符合要求，请输入1~20之间的数字');
        }
    </script>
    
</body>
</html>